<!doctype html>
<html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false"%>
<head>
<title>${registrationNO}-历史报警定位</title>
<%
	String contextPath = request.getContextPath();
	String contextBasePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ contextPath + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
   <c:set var="basePath"  value="<%=contextBasePath %>"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
	<link rel="stylesheet" href="${basePath}resources/js/common/plugin/bootstrap/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="${basePath}resources/js/common/plugin/bootstrap/css/bootstrap-responsive.min.css"/>
	<link href="${basePath}resources/css/common.css" rel="stylesheet" />
	<script src="${basePath}resources/js/common/plugin/jquery/jquery.min.js"></script>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=cded017f34c18e5b6b3248b7cde7786a"></script>	
	<script type="text/javascript" src="${basePath}resources/js/common/plugin/bootstrap/js/bootstrap.min.js"></script> 
</head>
<body >
<div style="height:100%;width:100%">
	<div id="tooldiv" style="position: absolute;z-index: 99;right:50px;top:10px;background-color: white;display:none">
		<select id="selectVehicleSel"  style="width:170px;margin: 0px;">
		</select>
	</div>
	<div >
		<div id="mymap"  style="position:absolute;height:100%;width:100%;z-index:10"></div>
	</div>
	<div id="ajax-loading" >
    	<img id="msgLoadImg" alt="" src="${basePath}resources/images/main/big_loading.gif">
    	<span id="msgSpan">正在拼命加载,请稍候!</span>
	</div>	
</div>
<script src="${basePath}resources/js/common/main/HashMap.js"></script>
<script src="${basePath}resources/js/common/main/global.js"></script>
<script src="${basePath}resources/js/common/main/nav.js"></script>
<script>
var registrationNO = '${registrationNO}';
var lon = '${lon}';
var lat = '${lat}';
var alarmTime = '${alarmTime}';
var alarmType = '${alarmType}';
var gpsSpeed = '${gpsSpeed}' * 0.1;
var head = '${head}';
var mapTool = {
	init : function(){
		this.loadingMap();
		this.isopenWin = true;
    },
    //初始化地图
    loadingMap : function(){
    	 var  _this=this;// 创建Map实例
         if($("#mymap").length<=0)return;
         this.map = new AMap.Map('mymap',{
             resizeEnable: true,
             zoom: _this.mapZoom,
             center: [lon * 0.000001, lat * 0.000001]
         });  
         AMap.plugin(['AMap.ToolBar'],function(){
        	 _this.map.addControl(new AMap.ToolBar());
         });
         mapTool.addMarker(this.map);
     },
     /*覆盖物图标*/
     getVehicleStatusPicUrl : function(){
         var carStatus = ['car','car','carYellow','red','gray'];
         var picUrl = global.url.domain + "gps-web/resources/images/mapTool/";
         try{
             //picUrl += this.getHead(head)+".png";
             //return picUrl;
        	 return picUrl  = global.url.domain + "gps-web/resources/images/mapTool/car1.png";
         }catch(ex){
             return picUrl  = global.url.domain + "gps-web/resources/images/mapTool/car1.png";  //出错的话 默认车辆图标
         } 
     },
     /**
      * 增加覆盖物
      * @param map
      * @param lon
      * @param lat
      */
	 addMarker : function(map){
		var picUrl = this.getVehicleStatusPicUrl();
		var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)}); 
		marker = new AMap.Marker({
	        map: mapTool.map,
	        position: [lon * 0.000001, lat * 0.000001],
	        icon: picUrl,
	        offset: new AMap.Pixel(-15, -10),
	        autoRotation: true
	    });
		marker.content = '车牌号：' + registrationNO +'</br>报警时间：'+ alarmTime +'</br>报警类型：'+ alarmType +' </br></br>GPS速度：'+ gpsSpeed +' 公里/小时';
		/* marker.on('click', function(e){
			 mapTool.isopenWin=true;
			 infoWindow.setContent(e.target.content);
		     infoWindow.open(mapTool.map, e.target.getPosition());
		}); */
		infoWindow.setContent(marker.content);
		infoWindow.open(map, marker.getPosition());
		marker.setMap(map);
		//$(marker).click();
		//AMap.event.addListener(marker, 'click', _onClick);
	},
	//获取方向，用于查询图片
    getHead : function(head){
        var head=head;
        if ((head >= 0 && head < 22) || (head >= 336)){
            return 3;
        }else if (head >=22 && head <66){
            return 7;
        }else if (head >=66 && head <112){
            return 1;
        }else if (head >=112 && head <=156){
            return 8;
        }else if (head >=156 && head <202){
            return 4;
        }else if (head >=202 && head <= 246){
            return 5;
        }else if (head >=246 && head <292){
            return 2;
        }else if (head >=292 && head <336){
            return 6;
        }
    },

    getChinaHead : function(head){
        var head=head;
        if ((head >= 0 && head < 22) || (head >= 336)){
            return '北';
        }else if (head >=22 && head <66){
            return '东北';
        }else if (head >=66 && head <112){
            return '东';
        }else if (head >=112 && head <=156){
            return '东南';
        }else if (head >=156 && head <202){
            return '南';
        }else if (head >=202 && head <= 246){
            return '西南';
        }else if (head >=246 && head <292){
            return '西';
        }else if (head >=292 && head <336){
            return '西北';
        }
    },
	//设置地图中心点
	setCenter : function(data){
		mapTool.map.setCenter(new AMap.LngLat(data.longitude, data.latitude));
	},
	//高德逆地址解析
	getAddress : function(ctrl,data){
		if(data.longitudeD=='0'&&data.latitudeD=='0'){
			return '无效经纬度，无法获取地址';
		}else{
			var ctrl="#"+ctrl;
			if(this.initHashMap.GlobalAddressCache.get(data.longitudeD+'_'+data.latitudeD)){
				return this.initHashMap.GlobalAddressCache.get(data.longitudeD+'_'+data.latitudeD);
			}else{
				var geocoder = new AMap.Geocoder({
		            radius: 1000,
		            extensions: "all"
		        });        
		        geocoder.getAddress(new AMap.LngLat(data.longitude, data.latitude), function(status, result) {
		            if (status === 'complete' && result.info === 'OK') {
		            	var address=result.regeocode.formattedAddress;
		            	mapTool.initHashMap.GlobalAddressCache.put(data.longitudeD+'_'+data.latitudeD,address);
		            	$(ctrl).text(address);
		            	$(ctrl).attr("title",address);
		            }
		        });     
			}	    
		}
		
	},
	/**
	 * 测距工具
	 */
	RangingTool : function(){
		mapTool.map.plugin(["AMap.RangingTool"], function() {
			ruler = new AMap.RangingTool(mapTool.map);
	        AMap.event.addListener(ruler, "end", function(e) {
	            ruler.turnOff();
	        });
		});
	},
	/**
	 * 画折线
	 * @param data
	 * @param lineArr
	 */
	drawTrack : function(data,lineArr){
		polyline = new AMap.Polyline({
			path: lineArr,
			strokeColor:"#3366FF",
			strokeWeight:4,
			strokeOpacity:1
		});
		polyline.setMap(mapTool.map);
		this.initHashMap.GlobalPolylineCache.put(mapTool.uuidCreate(),polyline);
	},
	/**
	 * 生成UUID
	 * @returns {String}
	 */
	uuidCreate : function(){
		var S4 = function(){
			return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
		}
		return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
	},
	/**
	 * 删除所有覆盖物
	 * 
	 */
	clearAllPolyline : function(){
		var polylines = this.initHashMap.GlobalPolylineCache.values();
		for(var i=0;i<polylines.length;i++){
			var polyline = polylines[i];
			 if(polyline){
				 polyline.setMap(null);
				 polyline = null;
		     }
		}		
	},
    drag : function(obj){
        var bodyH = $('body').height();
        $('#nResizeDiv').mousedown(function(){
            var monitorH = $('.monitor-detail').height();
            $('#nResizeMoveDiv').css({
                display:'block',
                height : monitorH + 7 + 'px',
                bottom : 0
            });
            mouseover();
        });



        var mouseover = function(){
            $('.page').bind('mousemove',function(e){
                var clientY = e.clientY; // console.log(clientY);
                $('#nResizeMoveDiv').css({
                    height:bodyH - clientY + 7 + 'px'
                });
                mouseout();
            });
        };

        var mouseout = function(){
            $('.page').bind('mouseup',function(e){
                var clientY = e.clientY;
                $('#nResizeMoveDiv').css({
                    height:bodyH - clientY + 7 + 'px'
                });
                $('#mymap').css({
                    height : clientY - obj.h + 'px'
                });
                $('.monitor-detail').css({
                    height : bodyH - clientY - 5 + 'px'
                });
                $('#nResizeMoveDiv').hide();
                $('.car-staues').css({
                    bottom : bodyH - clientY + 5
                });
                $('.page').unbind();
                obj.callback(bodyH - clientY - 15);
            });
        };
    }
	
};
mapTool.init();
</script>
</body>
</html>
